<template>
	<view style="height: 100%;">
		<uni-row style="height: 100%;">
		    <uni-col :span="6">
		        <view v-for="(item,index) in cate1" class="" style="line-height: 56px;text-align: center;" @click="selSelCid1(item)">
					<text :class="{first_cat_active: sel_cate1_id == item.id}">{{item.name}}</text>
				</view>
		    </uni-col>
		    <uni-col :span="18" style="height: 100%;background-color: #fff;padding: 10px;position: relative;">
				
				<view style="overflow-x: auto;white-space: nowrap;padding: 0;height: 40px;line-height: 40px;">
					<view v-for="(item,index) in sel_cate2" @click="selSelCid2(item)" :class="{second_cat_actvie: sel_cate2_id == item.id}" style="display: inline;padding: 5px;">{{item.name}}</view>
				</view>
				
				
		        <view class="wishes-wrapper">
					<checkbox-group @change="checkboxChange">
						<view class="wish create" v-for="(item,index) in sel_list">
							<view class="wish-content" style='position: relative;'>
								<checkbox style="transform:scale(0.8);position: absolute;top: 0;right: 0;z-index: 99;" :value="item.id + ''" />
								<image mode="widthFix" :src="item.cover[0]"/>
								<view style="text-align: center;color: gray;margin-top: 10px;">{{item.title}}</view>
							</view>
						</view>
					</checkbox-group>
		        	<!-- <view class="wish create">
		        	    <view class="wish-content" style='position: relative;'>
							<checkbox style="transform:scale(0.8);position: absolute;top: 0;right: 0;z-index: 99;" value="2" />
		        	        <image mode="widthFix" src="../../static/kongtiao.png"/>
		        	        <view style="text-align: center;color: gray;">健康xxxxx</view>
		        	    </view>
		        	</view> -->
					
					<view style="position: absolute;bottom: 0;right: 0;width: 100%;background-color: #007AFF;color: #fff;">
						<view style="line-height: 50px;text-align: center;" @click="yuyue()">立即预约</view>
					</view>
		        </view>
		    </uni-col>
		</uni-row>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				sel_cate1_id: 0,
				sel_cate2_id: 0,
				data: [],
				cate1: [],
				cate2: [],
				sel_cate2: [],
				sel_list: [],
				sel_ids: [],
			}
		},
		onLoad() {
			

		},
		onShow() {
			let that = this;
			this.$api.getService({}).then(res => {
				that.data = res.data.data;
				that.cate1 = res.data.cate1;
				that.cate2 = res.data.cate2;
				if (that.cate1.length > 0) {
					that.sel_cate1_id = that.cate1[0].id;
					that.sel_cate2_id = that.cate2[0].id;
					that.selSelCid1(that.cate1[0]);
					that.selLabel(that.sel_cate2_id, that.sel_cate1_id);
				}
			})
		},
		methods: {
			opendoor() {
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			confirmCommunity() {
				this.$refs.popup.close()
			},
			jumpto(url) {
				uni.navigateTo({
					url: url
				})
			},
			selLabel(item, item1) {
				let that = this;
				// this.sel_cate1_id = item.id;
				// this.sel_cate2_id = item1.id;
				this.sel_list = [];
				this.data.forEach(function(item, i) {
					if (item.lv1_cid == that.sel_cate1_id && item.lv2_cid == that.sel_cate2_id) {
						that.sel_list.push(item);
					}
				})
			},
			checkboxChange(e) {
				this.sel_ids = e.detail.value;
			},
			yuyue() {
				if (this.sel_ids.length <= 0) {
					return;
				}
				let ids = '';
				let len = this.sel_ids.length;
				this.sel_ids.forEach(function(item, i) {
					if (i == len - 1) {
						ids += item;
					} else {
						ids += item + ','
					}
				})
				uni.navigateTo({
					url: '/pages/index/detail?id=' + ids
				})
			},
			selSelCid1(item) {
				this.sel_cate1_id = item.id;
				this.selLabel(this.sel_cate1_id, this.sel_cate2_id);
				this.sel_cate2 = [];
				let that = this;
				this.cate2.forEach(function(item1, i) {
					if (item1.parent_id == that.sel_cate1_id) {
						that.sel_cate2.push(item1);
					}
				})
			},
			selSelCid2(item) {
				this.sel_cate2_id = item.id;
				this.selLabel(this.sel_cate1_id, this.sel_cate2_id);
			},
			
		}
	}
</script>

<style lang="scss">
	
	.second_cat_actvie {
		// background-color: red;
		// border-radius: 20px;
		// color: #fff;
		color: red;
		font-weight: bold;
	}
	
	uni-page-body, uni-page-refresh {
		height: 100%;
	}
	.first_cat_active {
		background-color: red;
		border-radius: 20px;
		color: #fff;
		padding: 5px 20px;
	}
	.wishes-wrapper {
	    // margin-right: -5px;
	    .wish {
				  width: 49%;
				  text-align: center;
	        vertical-align: top;
	        background: #fff;
	        border-radius: 10px;
	        width: rpx(349);
	        display: inline-block;
	        margin-right: 5px;
	        font-size: 14px;
				  margin: 0 0 10px 0;
	
	        &.create {
	            min-height: 227.8px;
	            .wish-content {
	                display: flex;
	                flex-direction: column;
						  border-radius: 10px 10px 0 0;
						  // border: 1px solid #eee;
						  padding-bottom: 10px;
						  text-align: left;
	
	                image {
	                    height: 140px;
	                    width: 100%;
	                }
	            }
	        }
	    }
	    .wish:nth-child(even) {
	        vertical-align: top;
	        background: #fff;
	        border-radius: 10px;
	        width: rpx(349);
	        display: inline-block;
	        font-size: 14px;
				  float: right;
				  margin: 0 0 10px 0;
	
	        &.create {
	            min-height: 227.8px;
	            .wish-content {
	                display: flex;
	                flex-direction: column;
						  border-radius: 10px 10px 0 0;
						  // border: 1px solid #eee;
						  padding-bottom: 10px;
	                text-align: left;
	
	                image {
	                    height: 140px;
	                    width: 100%;
	                }
	            }
	        }
	    }
	}
</style>
